<template>
  <views class="gen_batch_log_detail">
    <!-- 批次记录-详情 -->
    <!-- 批次信息 -->
    <div class="batch_information">
      <viewTitle :title="'业务信息'" :border="false"></viewTitle>
      <div class="order_list">
        <div class="flex flexR order_item">
          <div class="flex order_w">
            <div class="order_item_title Textl">企业编号:</div>
            <div class="order_item_content">{{detail.enterprise_sn||''}}</div>
          </div>
          <div class="flex order_w">
            <div class="order_item_title Textl">企业名称:</div>
            <div class="order_item_content">{{detail.enterprise_name  ||''}}</div>
          </div>
        </div>

        <div class="flex flexR order_item">
          <div class="flex order_w">
            <div class="order_item_title Textl">服务商名称:</div>
            <div class="order_item_content">{{detail.facilitator_name||''}}</div>
          </div>
          <div class="flex order_w">
            <div class="order_item_title Textl">批次状态:</div>
            <div class="order_item_content">{{detail.status_attr||''}}</div>
          </div>
        </div>

        <div class="flex flexR order_item">
          <div class="flex order_w">
            <div class="order_item_title Textl">商户批次号:</div>
            <div class="order_item_content">{{detail.enterprise_order_sn||''}}</div>
          </div>
          <div class="flex order_w">
            <div class="order_item_title Textl">提交时间:</div>
            <div class="order_item_content">{{detail.created_time||''}}</div>
          </div>
        </div>

        <div class="flex flexR order_item">
          <div class="flex order_w">
            <div class="order_item_title Textl">交易笔数:</div>
            <div class="order_item_content">{{detail.total_count||''}}</div>
          </div>
          <div class="flex order_w">
            <div class="order_item_title Textl">交易金额:</div>
            <div class="order_item_content">￥{{detail.total_money||''}}</div>
          </div>
        </div>

        <div class="flex flexR order_item">
          <div class="flex order_w">
            <div class="order_item_title Textl">批次来源:</div>
            <div class="order_item_content">{{detail.source||''}}</div>
          </div>
          <div class="flex order_w">
            <div class="order_item_title Textl"></div>
            <div class="order_item_content"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 付款明细 -->
    <div class="payment_detail">
      <viewTitle :title="'付款明细'" :border="false"></viewTitle>
      <div class="table_list">
        <el-table
          border
          :data="payment_table"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed type="index" label="序号" width="100"></el-table-column>
          <el-table-column fixed prop="enterprise_order_ext_sn" label="订单号" width="220"></el-table-column>
          <el-table-column prop="created_time" label="订单时间" width="200"></el-table-column>
          <el-table-column prop="real_money" label="交易金额" width="120"></el-table-column>
          <el-table-column prop="pay_time" label="完成时间" width="120"></el-table-column>
          <el-table-column prop="bank_account" label="收款户名" width="auto"></el-table-column>
          <el-table-column prop="bank_code" label="收款账号" width="auto"></el-table-column>
          <el-table-column prop="payment_status_desc" label="业务状态" width="auto"></el-table-column>
          <el-table-column prop="pay_err_msg" label="备注" width="auto"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paging flex flexR">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="total, sizes,prev, pager, next, jumper"
          @size-change="handleSizeChange($event)"
          @current-change="changePage($event)"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>

    <!-- 操作日志 -->
    <div class="operation_log">
      <viewTitle :title="'操作日志'" :border="false"></viewTitle>
      <div class="table_list">
        <el-table
          border
          :data="order_log_list"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed prop="opreator_name" label="操作人" width="150"></el-table-column>
          <el-table-column fixed prop="created_time_desc" label="操作时间" width="200"></el-table-column>
          <el-table-column fixed prop="remarks" label="操作描述" width="auto"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paging flex flexR">
        <!-- <el-pagination small layout="prev, pager, next" :total="50"></el-pagination> -->
      </div>
    </div>
  </views>
</template>




<script>
export default {
  data() {
    return {
      payment_table: [], // 付款明细
      order_log_list: [], // 操作日历
      detail: {}, // 业务信息
      pagination: {       //分页数据
        page_start: 1,
        page_size: 10,
        current_page: 0, //当前页码
        page_count: 0, //总页数
        total_count: 0 //总数量
      }, // 分页
      enterprise_order_id: ""
    };
  },
  computed:{
    getTerrace(){
      return  this.$store.state.terrace;
    }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 获取详情
    getData(enterprise_order_id){
      let res = {};
      if(this.getTerrace == 1){     //企业端
        res = this.$api.sendSync(this.$mapapi.e_getOrderDetail, {enterprise_order_id});
      }else if(this.getTerrace == 3){     //服务商端
        res = this.$api.sendSync(this.$mapapi.f_orderDetail, {enterprise_order_id});
      }
      if(res.code != 200){
        this.$message.error(res.msg);
        return;
      }
      this.order_log_list = res.data.order_log_list||[];
      this.detail         = res.data.detail||{};
    },
    //   付款明细
    orderDetailList(enterprise_order_id) {
      let post = {
        enterprise_order_id,
        pagination: this.pagination
      },  res = {};
      if(this.getTerrace == 1){     //企业端
        res = this.$api.sendSync(this.$mapapi.e_getOrderExt, post)
      }else if(this.getTerrace == 3){     //服务商端
        res = this.$api.sendSync(this.$mapapi.f_orderDetailList, post)
      }
      if (res.code != 200 && res.code != 501) {
        this.$message.error(res.msg);
        return;
      }
      this.payment_table = res.data.list || [];
      this.pagination = res.data.pagination || {};
      
    },
    // 分页
    handleSizeChange(val) {
      this.pagination.page_size = val;
      this.orderDetailList(this.enterprise_order_id);
    },
    changePage(val) {
      this.pagination.page_start = val;
      this.orderDetailList(this.enterprise_order_id);
    }
  },
  mounted() {
    this.$setRouteTitle();
    this.enterprise_order_id = this.$route.query.enterprise_order_id;
    this.getData(this.enterprise_order_id);
    this.orderDetailList(this.enterprise_order_id);
  },
  created() {}
};
</script>



<style lang="less"  :scope="true"  src="@/style/issuing/gen_batch_log_detail.less" >
</style>
